<template>
  <div class="AddMessage-container">
    <el-card class="AddMessage-select" shadow="never">
      <!--    输入框盒子-->
      <div class="AddMessage-inputBar">
        <div class="Select">
          <!--          分类代码：-->
          分类代码:
          <el-input size="small" clearable placeholder="分类代码" v-model="categoryCode" class="select-message"></el-input>
          <!--          分类名：-->
          分类名称：
          <el-input size="small" clearable placeholder="分类名称"  v-model="categoryName" class="select-message"></el-input>
          <!--          分类级别：-->
          分类级别：
          <el-select  size="small" clearable placeholder="分类级别" v-model="categoryLevel" class="select-message"
                     @change="handleQuery">
            <el-option v-for="item in categoryLevelOptions" :key="item.value" :value="item.value" :label="item.level">
              {{ item.level }}
            </el-option>
          </el-select>
          父级分类:
            <el-select size="small" placeholder="请选择父级分类" class="select-message" filterable clearable  @change="handleQuery" v-model="categoryParent">
              <el-option v-for="item in categoryParentData" :key="item.id" :value="item.id" :label="(item.categoryCode)+' '+(item.categoryName)">
                {{ item.categoryCode }} {{ item.categoryName }}
              </el-option>
            </el-select>
            <el-button type="primary" class="category-SelectButton" icon="el-icon-search" @click="handleQuery">查 询
            </el-button>
            <div class="code-introduce">
              <p>A-工程类</p>
              <p>B-货物类</p>
              <p>C-服务类</p>
            </div>
        </div>
      </div>
    </el-card>
    <el-card class="container" shadow="never">
      <div class="AddMessage-tableButton">
        <el-button type="primary" size="mini" @click="handleAddCategory()">+添加</el-button>
        <el-button type="danger" size="mini" @click="handleDeleteRole('批量',null)">批量删除</el-button>
      </div>
      <!--      表格-->
      <el-table border stripe v-loading="loading" style="width: 100%" :data="categoryData" :cell-style="rowStyle"
                :header-cell-style="rowStyle" @selection-change="handleSelectionChange">
        <el-table-column type="selection" min-width="55px"></el-table-column>
        <el-table-column prop="categoryCode" label="分类代码" width="180"></el-table-column>
        <el-table-column prop="categoryName" label="分类名称" show-overflow-tooltip width="180"></el-table-column>
        <el-table-column prop="categoryLevel" label="分类级别">
          <template v-slot="scope">
            <el-tag :type="scope.row.categoryLevel===0?'warning':scope.row.categoryLevel===1?'':'success'">
              {{ categoryLevelMap[scope.row.categoryLevel] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="categoryParentName"  show-overflow-tooltip label="父级分类"></el-table-column>
        <el-table-column prop="categoryRemark" show-overflow-tooltip label="分类备注"></el-table-column>
        <el-table-column prop="createUserName" label="创建人"></el-table-column>
        <el-table-column prop="updateTime" label="修改日期"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" size="mini" @click="handleUpdateCategory(scope.row.id)">编辑</el-button>
            <el-button type="text" size="mini" style="color: red" @click="handleDeleteRole('one',scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页组件-->
      <el-pagination :page-sizes="[5, 10, 20,50,100]" :page-size="this.pageSize" :current-page="this.page"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="this.counts" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
    <AddCategory/>
    <EditCategory/>
  </div>
</template>
<script>
import { DeleteCategoriesApi, GetAllCategoryParentApi, GetCategoryPageApi } from '@/request/category/category-api'
import AddCategory from '@/components/category/AddCategory.vue'
import store from '@/store'
import EditCategory from '@/components/category/EditCategory.vue'

export default {
  created () {
    this.init()
    this.getAllCategoryParent()
  },
  components: {
    AddCategory,
    EditCategory
  },
  data () {
    return {
      categoryLevelOptions: [
        {
          value: 0,
          level: '一级分类'
        },
        {
          value: 1,
          level: '二级分类'
        },
        {
          value: 2,
          level: '三级分类'
        }
      ],
      categoryLevelMap: ['一级分类', '二级分类', '三级分类'],
      categoryCode: '',
      categoryName: '',
      categoryLevel: '',
      categoryParent:null,
      categoryParentData:[],
      counts: 0,     //总数
      page: 1,      //当前页
      pageSize: 10, //每页个数
      checkList: [],  //多选
      categoryData: [], //分类数据
      loading: true
    }
  },
  methods: {
    //页面初始化
    async init () {
      this.loading = true
      const param = {
        page: this.page,
        pageSize: this.pageSize,
        categoryCode: this.categoryCode,
        categoryName: this.categoryName,
        categoryLevel: this.categoryLevel,
        categoryParent: this.categoryParent?this.categoryParent:undefined
      }
      let res = await GetCategoryPageApi(param)
      if (res&&res.code === 200) {
        this.categoryData = res.data.records
        this.counts = res.data.total
      } else {
        this.$message.error(res.msg?res.msg:"获取分类失败")
      }
      await this.getAllCategoryParent()
      this.loading = false
    },
    rowStyle () {
      return 'text-align:center'
    },
    async getAllCategoryParent () {
      let res = await GetAllCategoryParentApi()
      if (res) {
        if (res.code === 200) {
          this.categoryParentData = res.data
        } else {
          this.$message.error("获取父级分类信息失败")
        }
      }
    },
    handleDeleteRole (type, id) {
      if (type === '批量' && id === null) {
        if (this.checkList.length === 0) {
          return this.$notify.warning({
            title: '警告',
            message: '请选择删除内容！'
          })
        }
      }
      //重新提示是否删除
      this.$confirm('确认删除角色，是否继续？', '确认删除', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'warning'
      }).then(async () => {
        //确认是单删还是批量删除
        let ids = (type === '批量') ? this.checkList.join(',') : id
        let res = await DeleteCategoriesApi(ids)
        if (res.code === 200) {
          //删除成功后的逻辑
          this.handleQuery()
          this.$message.success('删除成功！')
        } else {
          this.$message.error(res.msg)
        }
      }).catch((e) => {
        if (e === 'cancel') {
          this.$message.info('取消删除')
        } else {
          this.$message.error('未知错误！')
        }
      })
    },
    handleAddCategory () {
      store.commit('CategoryEdit/changeAddCategorySync', true)
    },
    handleUpdateCategory (id) {
      store.commit('CategoryEdit/changeEditCategorySync', true)
      store.commit('CategoryEdit/changeEditCategoryId', id)
    },
    //处理多选
    handleSelectionChange (val) {
      let checkArr = []
      val.forEach((n) => {
        checkArr.push(n.id)
      })
      this.checkList = checkArr
    },
    // 查询
    handleQuery () {
      this.page = 1
      this.init()
    },
    // pageSize切换
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    // 当前页面切换
    handleCurrentChange (val) {
      this.page = val
      this.init()
    }
  }
}
</script>
<style scoped lang="less">
.AddMessage-container {
  .AddMessage-select {
    margin-bottom: 10px;

    .AddMessage-inputBar {
      font-size: 14px;

      .Select {
        .select-message {
          width: 200px;
          margin-right: 20px;
        }
        .code-introduce {
          float: right;
          margin-right: 20px;
          font-size: 12px;

          p {
            margin: 0;
          }
        }
      }
    }
  }

  .container {
    .AddMessage-tableButton {
      float: right;
      margin: 10px 0 10px 10px;
    }

    .el-pagination {
      text-align: center;
      margin: 15px;
    }
  }
}
</style>
